<template>
    <el-dialog :title="dialogFrom.dialogTitle" :model-value="dialogFrom.dialogVisible"
        @input:model-value="updateDialogVisible" align-center width="40%" :before-close="onCancel">
        <el-form ref="resetPasswordFormRef" :model="editPasswordFrom" :rules="rules" label-width="100px">
            <el-form-item label="旧密码" prop="oldPassword">
                <el-input v-model="editPasswordFrom.oldPassword" show-password placeholder="请输入旧密码" clearable></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
                <el-input v-model="editPasswordFrom.newPassword" show-password placeholder="请输入新密码" clearable></el-input>
                <div class="password-tips">密码需包含大小写字母、数字、特殊符号(!@#$%^&*)，长度8-20位</div>
            </el-form-item>
            <el-form-item label="确认新密码" prop="confirmPassword">
                <el-input v-model="editPasswordFrom.confirmPassword" show-password placeholder="请输入确认新密码"
                    clearable></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="onSubmit(resetPasswordFormRef)">提交</el-button>
                <el-button @click="onCancel">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
// -------------------------------------------------导入相关引用-------------------------------------------------
import { ElMessage,type FormInstance,type FormRules } from "element-plus";
import { ref, reactive } from "vue";
import { editPassword ,type EditPasswordForm } from "@/api/system/SysUser"
import router from "@/router";
// -------------------------------------------------相关参数定义-------------------------------------------------
const props = withDefaults(defineProps<{
    dialogFrom: DialogFrom
}>(), {
    dialogFrom: () => ({
        dialogTitle: '',
        dialogVisible: false,
    })
});

const resetPasswordFormRef = ref();

const editPasswordFrom = reactive<EditPasswordForm>({
    oldPassword: "",
    newPassword: "",
    confirmPassword: "",
});

const rules = reactive<FormRules>({
    oldPassword: [
        { required: true, message: "请输入旧密码", trigger: "blur" },
    ],
    newPassword: [
        { required: true, message: "请输入新密码", trigger: "blur" },
        {
            validator: (rule: any, value: string, callback: any) => {
                if (value === editPasswordFrom.oldPassword) {
                    callback(new Error('新密码不能与旧密码相同'));
                } else {
                    callback();
                }
            }, trigger: 'blur'
        },
        {
            validator: (rule: any, value: string, callback: any) => {
                const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*]).{8,20}$/;
                if (!regex.test(value)) {
                    callback(new Error('密码需包含大小写字母、数字、特殊符号(!@#$%^&*)，长度8-20位'));
                } else {
                    callback();
                }
            }, trigger: 'blur'
        }
    ],
    confirmPassword: [
        { required: true, message: "请输入确认新密码", trigger: "blur" },
        {
            validator: (rule: any, value: string, callback: any) => {
                if (value !== editPasswordFrom.newPassword) {
                    callback(new Error('两次输入的密码不一致'))
                } else {
                    callback()
                }
            }, trigger: 'blur'
        }
    ]
})
// -------------------------------------------------事件相关定义-------------------------------------------------
const emit = defineEmits(["update:dialogFrom"]);
// -------------------------------------------------操作方法定义-------------------------------------------------

const onSubmit = async (ref: FormInstance | undefined) => {
    // 提交表单
    if (!ref) return
    await ref.validate((valid, fields) => {
        if (valid) {
            editPassword(editPasswordFrom).then((res) => {
                if (res.data.code === 200) {
                    ElMessage.success({
                        message: '密码重置成功',
                        type: 'success'
                    })
                    onCancel()
                    router.push('/login')
                }
            })
        } else {
            console.log('error submit!!');
        }
    });

};

const updateDialogVisible = (val: DialogFrom) => {
    console.log(val);
    emit("update:dialogFrom", val);
};

const onCancel = () => {
    props.dialogFrom.dialogVisible = false;
    resetFrom()
};

const resetFrom = () => {
    editPasswordFrom.oldPassword = "";
    editPasswordFrom.newPassword = "";
    editPasswordFrom.confirmPassword = "";
}
// -------------------------------------------------实体类定义区-------------------------------------------------
export interface DialogFrom {
    dialogTitle: string;
    dialogVisible: boolean;
}
</script>
<style lang="scss" scoped>
.password-tips {
    height: 18px;
    font-size: 12px;
    color: #4d4d4d;
    margin-bottom: 10px;
}
</style>